<template>
  <div class="money-box">
    <img src="@/assets/images/payOrder/left.png" class="imgsize" @click="changeIndex('prev')" alt />
    <van-swipe
      ref="moneySwipe"
      class="money-swipe"
      :width="moneyWidth"
      :loop="false"
      :show-indicators="false"
      :duration="1000"
    >
      <van-swipe-item
        v-for="(item,index) in moneyData"
        :key="index"
        @click="handleCredit(item,index)"
      >
        <div class="bgsz" :class="{ 'border':  credit===item.credit }">
          <div v-if="item.credit > 5000">{{ item.credit / 1000 }}k</div>
          <div :class="{ 'animated': isAnimated && aniIndex===index }" v-else>{{ item.credit }}</div>
          <img
            :class="{ 'animated': isAnimated && aniIndex===index }"
            :src="item.src"
            class="imgsize2"
            alt
          />
        </div>
      </van-swipe-item>
    </van-swipe>
    <img src="@/assets/images/payOrder/right.png" class="imgsize" @click="changeIndex('next')" alt />
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "ComMoney",
  props: {},
  data() {
    return {
      isAnimated: false,
      moneyWidth: 0,
      initial: 0,
      aniIndex: 0,
      imgData: [
        { src: require("@/assets/images/payOrder/b1.png") },
        { src: require("@/assets/images/payOrder/b2.png") },
        { src: require("@/assets/images/payOrder/b3.png") },
        { src: require("@/assets/images/payOrder/b4.png") },
        { src: require("@/assets/images/payOrder/b5.png") }
      ],
      moneyData: []
    };
  },
  computed: {
    ...mapState("handlegame", ["gameInfo", "ruleId", "credit"])
  },
  created() {},
  mounted() {
    this.moneyData = this.gameInfo.gameRoomConfig.coinList;
    const screenWidth = window.innerWidth;
    const baseWidth = 375;
    const baseUnit = 55;
    const percentage = (screenWidth / baseWidth) * 100;
    const moneyWidth = (baseUnit * percentage) / 100;
    this.moneyWidth = moneyWidth;
    let imgIndex = 0;
    let imgDataIndex = 0;

    for (let i = 0; i < this.moneyData.length; i++) {
      const moneyObject = this.moneyData[i];
      moneyObject.src = this.imgData[imgIndex].src;
      imgIndex++;
      if (imgIndex >= 5) {
        imgIndex = 0;
        imgDataIndex++;
        if (imgDataIndex >= this.imgData.length) {
          imgDataIndex = 0;
        }
      }
    }
  },

  methods: {
    changeIndex(direction) {
      if (direction === "prev") {
        // 点击左箭头，减少索引
        if (this.initial > 0) {
          this.initial--;
          this.$refs.moneySwipe.prev();
        }
      } else if (direction === "next") {
        // 点击右箭头，增加索引
        if (this.initial < this.moneyData.length - 5) {
          this.initial++;
          this.$refs.moneySwipe.next();
        }
      }
    },
    animateImage(index) {
      this.aniIndex = index;
      this.isAnimated = true;
      // 为了让动画播放完后恢复原状
      setTimeout(() => {
        this.isAnimated = false;
      }, 500); // 这里的时间要与动画的持续时间一致
    },
    //判断金额是否超出限制
    handleCredit(item, index) {
      this.$store.dispatch("handlegame/ruleIdFunc").then(res => {
        var MoneyConfig = this.gameInfo.gameRoomConfig.betLimitConfig;
        var ruleId = res.ruleId;
        var selectedRule = "";
        for (var configName in MoneyConfig) {
          if (configName === ruleId) {
            selectedRule = MoneyConfig[configName];
            break;
          }
        }
        if (selectedRule) {
          if (item.credit <= selectedRule.maxBet) {
            this.animateImage(index);
            this.$store.dispatch("handlegame/setMoney", item.credit);
          } else {
            this.$toast({
              message: this.$t("bctzzgye") + selectedRule.maxBet,
              duration: 2000
            });
          }
        } else {
          if (item.credit <= MoneyConfig.default.maxBet) {
            this.animateImage(index);
            this.$store.dispatch("handlegame/setMoney", item.credit);
          } else {
            this.$toast({
              message: this.$t("bctzzgye") + MoneyConfig.default.maxBet,
              duration: 2000
            });
          }
        }
      });
    }
  }
};
</script>
<style lang="less" scoped>
.border {
  border: 1px solid #ffffff;
  border-radius: 50%;
}
// .animated {
//   animation: bounce 0.5s;
// }

// @keyframes bounce {
//   0% {
//     transform: translateY(0);
//   }
//   50% {
//     transform: translateY(-10px);
//   }
//   100% {
//     transform: translateY(0);
//   }
// }
.money-swipe {
  width: 262px;
}
.imgsize {
  width: 10px;
  height: 13px;
}
.imgsize2 {
  width: 44px;
  height: 44px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}
.bgsz {
  width: 44px;
  height: 44px;
  text-align: center;
  line-height: 44px;
  position: relative;
  font-size: 11px;
  font-family: PingFang SC-Bold, PingFang SC;
  font-weight: bold;
  color: #000000;
}
.money-box {
  width: 313px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
/* 添加过渡效果 */
/deep/.van-swipe-item {
  transition: transform 0.3s ease; /* 根据需要调整过渡效果的时间和缓动函数 */
}
</style>
